<template>
  <div class="page-container">
    <profile-header />
    <div class="follow-container">
      <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
        <a-tab-pane key="1" tab="我关注的主播"></a-tab-pane>
        <a-tab-pane key="2" tab="我关注的专家"></a-tab-pane>
        <a-tab-pane key="3" tab="我关注的作者"></a-tab-pane>
        <a-tab-pane key="4" tab="我关注的用户"></a-tab-pane>
      </a-tabs>

      <div v-if="followList.length > 0" class="follow-list">
        <div v-for="item in followList" :key="item.id" class="follow-item">
          <img :src="item.avatar" :alt="item.name" class="avatar" />
          <div class="info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
          </div>
          <a-button class="follow-btn" type="default">已关注</a-button>
        </div>
      </div>
      <div v-else class="empty-state">
        <a-empty description="暂无关注内容" />
      </div>

      <a-pagination
        v-if="total > 0"
        v-model:current="currentPage"
        :total="total"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import profileHeader from './profileHeader.vue'

const activeKey = ref('1')
const followList = ref([])
const currentPage = ref(1)
const total = ref(0)

const fetchData = async (tabKey, page = 1) => {
  try {
    const response = await fetch(`/api/follow?type=${tabKey}&page=${page}`)
    const data = await response.json()
    followList.value = data.list || []
    total.value = data.total || 0
  } catch (error) {
    message.error('获取数据失败')
    followList.value = []
    total.value = 0
  }
}

const handleTabChange = (key) => {
  currentPage.value = 1
  //   fetchData(key)
}

const handlePageChange = (page) => {
  //   fetchData(activeKey.value, page)
}

onMounted(() => {
  //   fetchData(activeKey.value)
})
</script>

<style lang="scss" scoped>
:deep(.ant-tabs-nav) {
  margin-bottom: 20px;

  // 添加以下样式
  .ant-tabs-ink-bar {
    background-color: #16b13a;
  }

  .ant-tabs-tab {
    color: #333; // 默认颜色

    &.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #16b13a;
      }
    }
  }
}
.page-container {
  //   display: flex;
  //   justify-content: center;

  //   min-height: 100vh;
}

.follow-container {
  width: 980px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .follow-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;

    .follow-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .info {
        flex-grow: 1;

        h3 {
          margin: 0;
          font-size: 16px;
        }

        p {
          margin: 5px 0 0;
          font-size: 14px;
          color: #666;
        }
      }

      .follow-btn {
        margin-left: 10px;
      }
    }
  }

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }

  :deep(.ant-pagination) {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
